<template>
    <div class="descriptionContainer">
        <img src="/src/assets/img/games/beach/leftBack02.webp" alt="">
        <div class="textDescription">
            <h1>BUILD. PLAN. BOOM!</h1>
            <p>Come with a plan or leave in defeat! Welcome to Boom Beach, an epic combat strategy game where your
                brains and your troop's brawn fight against the evil Blackguard. Attack bases to free enslaved islanders
                or create a task force with friends and other players to take on the enemy together, all while exploring
                and unlocking secrets of this beautiful archipelago. Scout, plan, then BOOM THE BEACH!</p>
            <div class="app-downloads">
                <a href="https://itunes.apple.com/app/reef/id672150402?mt=8" target="_blank"
                   class="app-store-link"><img
                    src="/src/assets/img/footer/appstore.webp" alt="App Store"></a>
                <a href="https://play.google.com/store/apps/details?id=com.supercell.boombeach&referrer=mat_click_id%3D7eaae9c2d9f3078d3a14bb1f01d94049-20141216-1681"
                   target="_blank"
                   class="play-store-link"><img src="/src/assets/img/footer/googlestore.webp"
                                                alt="Google Play"></a>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.descriptionContainer {
    padding: 50px 0;
    display: flex;
}

.descriptionContainer img {
    width: 58%;
    margin-left: -16%;
}

.descriptionContainer .textDescription {
    width: 40%;
    margin: auto;
}

.textDescription h1 {
    font-size: 34px;
    font-weight: bold;
    margin: 23px 0;
}

.textDescription p {
    font-size: 18px;
    line-height: 1.5;
}

.app-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 23px;
}

.app-downloads a {
    margin-right: 20px;
}

.app-store-link img, .play-store-link img {
    height: 50px;
    width: auto;
    margin: 0;
    padding: 0;
}
</style>